<template>
  <div>
    <div>
      <Button type="primary" id="import" class="clearfix" @click="selectFile">导入</Button>
    </div>
    <div style="padding-left: 20px;">
      {{tableData}}
    </div>
    <!-- <Table :data="tableData" :columns="columnsUser" border style="width: 100%" id="table">
      <template slot-scope="{ row, index }" slot="peopleName">
        {{row.peopleName}}
      </template>
    </Table> -->
    <input type="file" id="file" @change="importFile" />
  </div>
</template>

<script>
import untils from "../utils/excel";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      title: [],
      tableData: [],
      columns:[
        {
            title: '姓名',
            key: 'peopleName',
            align: 'center',
            slot: "peopleName"
        },
        {
            title: '主机ip',
            key: 'ip',
            align: 'center'
        },
        {
            title: '从账号名称',
            key: 'subAccount',
            align: 'center'
        },
        {
            title: '附加组',
            key: 'addiGroup',
            align: 'center'
        },
        {
            title: '主组',
            key: 'mainGroup',
            align: 'center'
        },
        {
            title: 'home目录',
            key: 'homePath',
            align: 'center'
        },
        {
            title: '权限开始日期',
            key: 'startTime',
            align: 'center'
        },
        {
            title: '是否可删除',
            key: 'isdel',
            align: 'center'
        }
      ],
      columnsUser:[
        {
            title: '账号名',
            key: 'user_number',
            align: 'center',
        },
        {
            title: '用户姓名',
            key: 'user_name',
            align: 'center'
        },
        {
            title: '电话号码',
            key: 'phone',
            align: 'center'
        },
        {
            title: '身份证',
            key: 'id_card',
            align: 'center'
        },
        {
            title: '4a账号',
            key: 'fourA',
            align: 'center'
        }
      ],
      dialogFormVisible: false,
      form: {
        name: "",
        suffix: "csv"
      },
      rules: {
        name: [{ required: true, message: "请输入文件名称", trigger: "blur" }]
      },
      formLabelWidth: "100px"
    };
  },
  methods: {
    exportExcel() {
      if (this.form.name == "") {
        this.$message.error("请先输入文件名");
        return false;
      }
      /* const title = [["日期", "支出明细",null, "收入",null, "金额"],[null,"支出项","金额","收入项","金额",null]];
      const body = [];
      this.tableData.map((item, index) => {
        body[index] = [item.date, item.prop1, item.prop2, item.prop3,item.prop4,item.prop5];
      });
      untils.exportFromArray({
        title,
        body,
        name: this.form.name,
        suffix: this.form.suffix,
        merges: [
          { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
          { s: { r: 0, c: 1 }, e: { r: 0, c: 2 } },
          { s: { r: 0, c: 3 }, e: { r: 0, c: 4 } },
          { s: { r: 0, c: 5 }, e: { r: 1, c: 5 } }
        ]
      }); */
      untils.exportFromTable({
        id: "table",
        name: this.form.name,
        suffix: this.form.suffix,
        merges: [
          { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
          { s: { r: 0, c: 1 }, e: { r: 0, c: 2 } },
          { s: { r: 0, c: 3 }, e: { r: 0, c: 4 } },
          { s: { r: 0, c: 5 }, e: { r: 1, c: 5 } }
        ]
      });
      this.form = {
        name: "",
        suffix: "csv"
      };
      this.dialogFormVisible = false;
    },
    selectFile() {
      const el = document.getElementById("file");
      el.click();
    },
    async importFile() {
      const el = document.getElementById("file");
      const file = el.files[0];
      var that = this
      var data = await untils.importFromLocal(file, 0, "D1", 1);
      this.tableData = untils.handleInfoToColKeyVal(data.body,that)
      // var temp = untils.handleInfoByColumns(data.body,that.columnsUser,that)
      // console.log("data------------------->",temp)
      // this.title = data.title;
      // this.tableData = temp;
      el.value = "";
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#export {
  float: right;
  margin: 12px 0;
}
#import {
  margin: 12px 0;
}
#file {
  display: none;
}
.el-select {
  width: 100%;
}
</style>
